<template>
	<view class="userInfo-page">
		<van-nav-bar title="用户详情" left-text="返回" left-arrow @click-left="Back" />

		<!-- 头像 -->
		<img :src="photo" @click="updateImage" class="profile">

		<!-- 详情内容区域 -->
		<view class="info-wrap">
			<!-- 账号 -->
			<view class="phone">
				<text style="margin-right: 20rpx;">账号</text>
				<text>{{phone}}</text>
			</view>
			<!-- 用户名 -->
			<view class="userName">
				<text>用户名</text>
				<input type="text" v-model="username" placeholder="设置用户名">
			</view>
			<!-- 性别 -->
			<view class="sex">
				<text>性别</text>
				<radio-group @change="radioChange" class="sex-group">
					<label class="radio">
						<radio value="男" :checked="sex == '男' " />
						<text>男</text>
					</label>
					<label class="radio">
						<radio value="女" :checked="sex == '女' " />
						<text>女</text>
					</label>
				</radio-group>
			</view>

			<!-- 年龄 -->
			<van-field is-link readonly label="年龄" :placeholder="age" @click="showPicker = true" />
			<van-popup v-model:show="showPicker" round position="bottom">
				<van-date-picker :columns-type="columnsType" @confirm="onConfirm" @cancel="showPicker = false"
					v-model="currentDate" title="选择年份" :min-date="minDate" :max-date="maxDate" />
			</van-popup>

			<!-- 用户昵称 -->
			<view class="nickName">
				<text>用户昵称</text>
				<input type="text" v-model="nickname" placeholder="设置昵称">
			</view>
			<!-- 城市 -->
			<view class="city" v-model="address">
				<text>城市</text>
				<input type="text" v-model="address" placeholder="请设置城市">
				<van-icon name="arrow" />
			</view>
			<!-- 保存按钮 -->
			<van-button type="primary" class="save-btn" block size="normal" @click="onSave">保存</van-button>
		</view>


	</view>

</template>

<script setup>
	import $api from '../../request/index.js'

	import {
		showFailToast,
		showSuccessToast
	} from 'vant'

	import {
		ref
	} from 'vue'

	import {
		onShow
	} from '@dcloudio/uni-app'

	// 最小的年份
	let minDate = new Date(1923, 0, 1)
	// 最大的年份
	let maxDate = new Date(2023, 8, 31)
	// 日期选择器
	const columnsType = ['year', 'month', 'day']
	// 默认选择的日期
	const currentDate = ref(['2000', '01', '01']);
	// 控制年份选择器的 显示与隐藏
	const showPicker = ref(false);
	// 默认头像
	let photo = ref('../static/moto_profile.png')
	// 账号
	let phone = ref('10000000000')
	// 用户名
	let username = ref('')
	// 昵称
	let nickname = ref('')
	// address
	let address = ref('')
	// 年龄
	let age = ref('请选择年龄')
	// 性别
	let sex = ref('男')


	onShow(() => {
		// 获得用户的详情
		$api.get('/moto/User/findUserIsHand').then(res => {
			res = res.data
			photo.value = res.photo
			sex.value = res.sex
			nickname.value = res.nickname
			phone.value = res.phone
			username.value = res.username
			age.value = res.age.toString()
			address.value = res.address
		})
	})

	// 根据选择的年份 计算出年龄
	const onConfirm = (value) => {
		showPicker.value = false
		age.value = (2023 - value.selectedValues[0]).toString()
	}



	const onSave = () => {
		// 拿到所有可设置的值 去进行更改
		let data = {
			photo: photo.value,
			username: username.value,
			nickname: nickname.value,
			address: address.value,
			age: age.value,
			sex: sex.value
		}
		console.log(data)
		// 发送修改信息的请求
		$api.put('/moto/User/updateUser', data).then(res => {
			console.log(res.code)
			if (res.code) {
				showSuccessToast('修改成功')
				setTimeout(() => {
					Back()
				}, 1000)
			} else {
				showFailToast('修改失败')
			}
		})
	}

	// 头像上传
	const updateImage = () => {
		uni.chooseImage({
			count: 1, // 上传数量
			success: res => {
				let file = res.tempFilePaths[0]
				uni.uploadFile({
					url: '/api/admin/common/upload',
					name: 'file',
					filePath: file,
					success: res => {
						res = JSON.parse(res.data)
						console.log(res.data)
						photo.value = res.data
					}
				})
			}
		})
	}
	// 单选 切换性别
	const radioChange = e => sex.value = e.detail.value

	const Back = () => uni.navigateBack()
</script>

<style>
	.userInfo-page {
		background-color: #F6F6F6;
	}

	/* 头像 */
	.profile {
		display: block;
		margin: 40rpx auto;
		width: 200rpx;
		border-radius: 50%;
		box-shadow: 0 0 2px #000;
	}

	/* 详情容器 */
	.info-wrap {
		border-radius: 40rpx 40rpx 0 0;
		overflow: hidden;
		height: calc(100vh - 146px);
	}

	/* 输入框触发效果 */
	input:hover {
		padding: 10px;
		border-bottom: 2px solid #eee;
		font-size: 20px;
	}

	.age,
	.city {
		justify-content: space-between;
	}

	.info-wrap>view {
		border-bottom: 1rpx solid #eee;
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		align-items: center;

	}

	.info-wrap>view>text {
		margin-right: 20rpx;
	}

	.age {
		display: flex;
		justify-content: space-between;
	}

	.sex-group {
		display: flex;
	}

	.radio {
		margin: 0 20rpx;
	}

	.save-btn {
		margin-top: 60rpx;
	}
</style>